<template>
  <div class="pageWrapper">
    <SearchBar @onSearch="handleSearch" @childFn="resetForm">
      <SearchBarItem label="主订单号：" :labelLg="8">
        <Input type="text" v-model="dataModule.orderId" placeholder="请输入" maxlength="32" clearable />
      </SearchBarItem>
      <SearchBarItem label="源主订单号：" :labelLg="8">
        <Input type="text" v-model="dataModule.originalOrderId" placeholder="请输入" maxlength="32" clearable />
      </SearchBarItem>
      <SearchBarItem label="支付订单号：" :labelLg="8">
        <Input type="text" v-model="dataModule.paymentId" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="渠道支付订单号：" :labelLg="8">
        <Input type="text" v-model="dataModule.flowId" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="订单状态：" :labelLg="8">
        <Select v-model="dataModule.orderStatus" placeholder="请选择" :clearable="isClear">
          <Option :value="item.key" v-for="(item, key) in stateList" :key="key">{{item.value}}</Option>
        </Select>
      </SearchBarItem>
      <SearchBarItem label="业务场景：" :labelLg="8">
        <Select v-model="dataModule.orderSource" placeholder="请选择" :clearable="isClear">
          <Option :value="item.key" v-for="(item, key) in businessList" :key="key">{{item.value}}</Option>
        </Select>
      </SearchBarItem>
      <SearchBarItem label="支付状态：" :labelLg="8">
        <Select v-model="dataModule.payStatus" placeholder="请选择" :clearable="isClear">
          <Option :value="item.key" v-for="(item, key) in payStateList" :key="key">{{item.value}}</Option>
        </Select>
      </SearchBarItem>
      <SearchBarItem label="下单时间：" :labelLg="8" >
         <DatePicker type="daterange" ref="createDatePicker" split-panels transfer placeholder="起始时间" @on-change="createTime"></DatePicker>
      </SearchBarItem>

      <SearchBarItem label="交易时间：" :labelLg="8">
        <DatePicker type="daterange" ref="dealDatePicker" split-panels transfer placeholder="起始时间" @on-change="dealTime"></DatePicker>
      </SearchBarItem>
    </SearchBar>
    <RemoteTable :namespace="namespace" :columns="columns" @onSortChange="onSortChange">
      <template #extra>
        <Authc permissions="trade:order:blanketOrder:export">
          <Button :loading="exportLoading" type="primary" icon="ios-download-outline" @click="exportExcel">导出</Button>
        </Authc>
      </template>
    </RemoteTable>
  </div>
</template>

<script>
import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card
} from "view-design";
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../module/blanketModule";
import Authc from "@/components/Authc";
import Tables from "@/components/tables";
import Action from "./Action";
import config from "@/utils/config";
import appService from "@/utils/appService";
import util from "@/utils/util";

export default {
    name: "tables_page",
    components: {
        RemoteTable,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        RemoteSelect,
        Authc,
        Action,
        Tables,
        Button,
        Input,
        Modal,
        Message,
        Col,
        Row,
        Form,
        FormItem,
        DatePicker,
        Select,
        Option,
        Card
    },
    data() {
        return {
            requireUrl: "",
            namespace: namespace,
            isClear: true,
            loading: true,
            modal1: false,
            exportLoading: false,
            dataModule: {},//查询条件
            stateList:[],//订单状态
            businessList:[],//业务场景
            payStateList:[], //支付状态
            tableData: [],
            columns: [
                {
                    title: "序号",
                    type: "index",
                    width: 80,
                    align: "center"
                    // ces
                    // fixed: "left"
                },
                {
                    title: "主订单号",
                    key: "orderId",
                    width: 180,
                    align: 'center'
                    // fixed: "left"
                },
                {
                    title: "源主订单号",
                    key: "originalOrderId",
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: "支付订单号",
                    key: "paymentId",
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: "渠道支付订单号",
                    key: "flowId",
                    align: 'center',
                    minWidth: 160
                },
                {
                    title: "业务场景",
                    key: "orderSource",
                    align: 'center',
                    minWidth: 100
                },
                {
                    title: "订单状态",
                    key: "orderStatusCN",
                    align: 'center',
                    minWidth: 130
                },
                {
                    title: "支付状态",
                    key: "payStatusCN",
                    align: 'center',
                    minWidth: 100
                },
                {
                    title: "应收金额(元)",
                    key: "orderAmount",
                    align: 'center',
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.orderAmount / 100;
                        return h('span', util.toMoney(item))
                    }
                },
                {
                    title: "实付金额(元)",
                    key: "payAmount",
                    align: 'center',
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.payAmount / 100;
                        return h('span', util.toMoney(item))
                    }
                },
                {
                    title: "下单时间",
                    key: "createdDt",
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: "交易时间",
                    key: "payTime",
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: "操作",
                    key: "action",
                    // fixed: "right",
                    align: "center",
                    permissions: ["trade:order:blanketOrder"],
                    minWidth: 200,
                    render: function(h, data) {
                        return h(Action, {
                            props: {
                                row: data.row
                            }
                        });
                    }
                }
            ]
        };
    },
    created(){
        /** 重置请求参数, 解决搜索之后，请求参数没有清空的问题 **/
        this.$store.commit(`${namespace}/reviseQuery`);
        this.getSelect();
    },
    methods: {
        handleSearch() {
            let pageSize = {
                currentPage: 1,
                pageSize: 10
            };
            this.$store.dispatch(`${namespace}/query`, {...this.dataModule, ...pageSize});
        },
        onSortChange(sort) {
            if (sort.order === "normal") {
                this.queryParam.order = [];
            } else {
                this.queryParam.order = [sort.key + " " + sort.order];
            }
            this.handleSearch();
        },
        // 清空事件；
        resetForm() {
            /** data 里面没有显示声明的，就得用 this.$set 动态修改对应的值 **/
            this.$set(this.dataModule, 'orderId', '');
            this.$set(this.dataModule, 'originalOrderId', '');
            this.$set(this.dataModule, 'paymentId', '');
            this.$set(this.dataModule, 'flowId', '');
            this.$set(this.dataModule, 'orderStatus', '');
            this.$set(this.dataModule, 'orderSource', '');
            this.$set(this.dataModule, 'payStatus', '');
            // 清空时间选择
            this.$refs["createDatePicker"].handleClear();
            this.$refs["dealDatePicker"].handleClear();
        },
        //查询数据字典
        getSelect(){
            this.$store.dispatch(`${namespace}/getSearchKey`).then( res => {
                console.log(res);
                if (res.data.errorCode === 0) {
                    let data = res.data.data;
                    this.stateList = data.orderStatus; // 订单状态
                    this.businessList = data.orderSource; // 业务来源
                    this.payStateList = data.orderPayStatus; //支付状态
                }
            });
        },
        // 下单时间
        createTime (date, type) {
            this.dataModule.createTimeBegin = date ? date[0] : '';
            this.dataModule.createTimeEnd = date ? date[1] : '';
        },
        // 交易时间
        dealTime (date, type) {
            this.dataModule.payTimeBegin = date ? date[0] : '';
            this.dataModule.payTimeEnd = date ? date[1] : '';
        },
        async exportExcel() {
            this.$data.exportLoading = true;
            try {
                let res = await this.$store.dispatch(`${namespace}/exportExcel`, this.dataModule);
                util.exportExcle(res, '总订单明细表');
            } catch (error) {
                this.$Message.error({
                content: '导出失败'
                })
            } finally {
                this.$data.exportLoading = false;
            }
        }
    },
    async mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1000);
    }
};
</script>

<style lang="less" scoped>
/deep/ .ivu-date-picker .ivu-picker-panel-body {
    display: block !important;
}
</style>
